import GrandChild from "./GrandChild.jsx"
import { computed } from "vue"
export default {
    name: "Child",
    props: {
        highlightRowKey: {
            type: [String, Number],
            default: null,
        },
    },
    setup(props, { attrs }) {
        // console.log(`props 👉`, props)
        const 计算highlightRowKey = computed(() => {
            console.log(`computed ing👇`)
            const { highlightRowKey } = props
            return highlightRowKey + "computed"
            // return props.highlightRowKey + "computed"
        })
        return () => (
            <div class="child">
                <h3>子组件</h3>
                <div>父组件 props.highlightRowKey: {props.highlightRowKey} </div>
                <div>计算highlightRowKey 可以直接解构props，不会破坏响应式 : {计算highlightRowKey.value} </div>
                <GrandChild {...attrs} />
            </div>
        )
    },
}
